{% extends "overrides/main.html" %}

<!-- Render hero under tabs -->
{% block tabs %}
  {{ super() }}

  <!-- Additional styles for landing page -->
  <style>

    .md-main{
      display: none;
    }

    /* Application header should be static for the landing page */
    .md-header {
      position: initial;
    }

    /* Remove spacing, as we cannot hide it completely */
    .md-main__inner {
      margin: 0;
    }

    /* Hide main content for now */
    .md-content {
      display: none;
    }

    /* Gradient background + blob */
    .tx-container {
      padding-top: 2rem;
      background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2v0,-2Z' style='fill: white' /></svg>") no-repeat bottom,
        linear-gradient(
          to bottom,
          var(--md-primary-fg-color),
          hsla(280deg, 67%, 55%, 1) 99%,
          white 99%
        );
    }

    /* Set inverted text color on hero */
    .tx-hero {
      margin: 0 .8rem;
      color: var(--md-primary-bg-color);
    }

    /* Make main headline thicker */
    .tx-hero h1 {
      margin-bottom: 1rem;
      color: currentColor;
      font-weight: 700;
    }

    /* Ensure that blob doesn't overlap buttons */
    .tx-hero__content {
      padding-bottom: 6rem;
    }

    /* Adjust spacing of buttons and invert them */
    .tx-hero .md-button {
      margin-top: .5rem;
      margin-right: 3.5rem;
      color: var(--md-primary-bg-color);
    }

    /* Invert primary button */
    .tx-hero .md-button--primary {
      background-color: var(--md-primary-bg-color);
      color: hsla(280deg, 37%, 48%, 1);
      border-color: var(--md-primary-bg-color);
    }

    /* Invert hover and focus button states */
    .tx-hero .md-button:hover,
    .tx-hero .md-button:focus {
      background-color: var(--md-accent-fg-color);
      color: var(--md-default-bg-color);
      border-color: var(--md-accent-fg-color);
    }

    /* [mobile portrait -]: Adjust headline */
    @media screen and (max-width: 30em) {

      /* Make main headline smaller */
      .tx-hero h1 {
        font-size: 1.4rem;
      }
    }

    /* [tablet landscape +]: Display content and image next to each other */
    @media screen and (min-width: 60em) {

      /* Hide table of contents */
      .md-sidebar--secondary {
        display: none;
      }

      /* Use flex layout to align items */
      .tx-hero {
        display: flex;
        align-items: stretch;
      }

      /* Increase bottom spacing and set dimensions */
      .tx-hero__content {
        max-width: 25rem;
        margin-top: 0.5rem;
        padding-bottom: 14vw;
      }

      /* Swap with teaser and set dimensions */
      .tx-hero__image {
        width: 30rem;
        margin-top: 4.5rem;
        order: 1;
        transform: translateX(3rem);
      }
    }

    /* [screen +]: Adjust spacing */
    @media screen and (min-width: 76.25em) {

      /* Hide navigation */
      .md-sidebar--primary {
        display: none;
      }

      /* Ensure the image aligns with the repository information */
      .tx-hero__image {
        transform: translateX(3rem);
      }
    }
  </style>

  <!-- Hero for landing page -->
  <section class="tx-container">
    <div class="md-grid md-typeset">
      <div class="tx-hero">

        <!-- Hero image -->
        <div class="tx-hero__image">
          <img
            src="assets/images/Devops.png"
            alt=""
            width="1659"
            height="1200"
            draggable="false"
          >
        </div>

        <!-- Hero content -->
        <div class="tx-hero__content">
          <h1>持续集成，持续发布，持续部署</h1>
          <p>{{ config.site_description }}.</p>
          <p>-实现了软件构建发布部署流程的自动化；<br>
             -自动化的流程提高了效率，实现了软件的快速发布； <br>
             -自动化的流程避免了人为的失误，提高了软件发布的准确性；<br>
             -自动化的流程能够尽早地发现问题;<br>
             -自动化的流程保证了软件功能的持续集成，而没有回退； <br>
             -自动化的流程使得软件的发布可靠且可重复；<br></p>
          <a
            href="{{ page.next_page.url | url }}"
            title="{{ page.next_page.title | striptags }}"
            class="md-button md-button--primary"
          >
          CICD和DevOps 
          </a>
          <a
            href="{{ config.repo_url }}"
            title="{{ lang.t('source.link.title') }}"
            class="md-button"
          >
          Go To GitHub
          </a>
        </div>
      </div>
    </div>
  </section>
{% endblock %}

<!-- Content -->
 {% block content %}{% endblock %} 

<!-- Application footer -->
{% block footer %}{% endblock %}
